<script setup>
defineOptions({
  name: 'GoodsItem'
})
defineProps({
  item: {
    type: Object
  }
})
</script>

<template>
  <div class="col" @click="$router.push(`/production/${item.id}`)">
    <div class="card goodes bg-white text-center">
      <img
        :src="item.picture"
        class="d-block mx-auto img-fluid"
        width="306"
        height="306"
        alt=""
      />
      <div class="card-footer bg-white text-center">
        <h4>{{ item.name ? item.name : item.title }}</h4>
        <p v-if="item.price" class="text-danger">{{ '￥' + item.price }}</p>
        <p class="text-secondary">{{ item.alt }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.goodes {
  cursor: pointer;
  transition: 1s;
  position: relative;
  box-shadow: 0 0 0px rgb(66, 66, 66);
  bottom: 0;
  &:hover {
    box-shadow: 0 15px 20px gray;
    bottom: 3px;
  }
  h4 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
